<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-title">
                登录后台
            </div>
            <el-form ref="formRef" :rules="data.rules" :model="data.form" style="margin:5px 20px;">
                <el-form-item prop="username">
                    <el-input size="large" prefix-icon="User" v-model="data.form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input show-password size="large" prefix-icon="Lock" type="password" v-model="data.form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <div>
                    <el-button size="large" type="primary" style="width:100%;" @click="login">登录</el-button>
                </div>
                <div style="text-align: right;margin-top:10px;">还没有账号？请&nbsp;<a style="color:blue;text-decoration: none;" href="/regedit">注册</a></div>
            </el-form>
            
        </div>
    </div>
</template>
<script setup>
    import {reactive,ref} from "vue"
    import {User,Key,Lock} from "@element-plus/icons-vue"
    import request from "@/utils/request";
import router from "@/router";

    const data = reactive({
        form:{},
        rules:{
            username:[
                {required:true,message:"请输入用户名",trigger:'blur'}
            ],
            password:[
                {required:true,message:"请输入密码",trigger:'blur'}
            ]
        }
    })
    const formRef = ref()
    const login=()=>{
        formRef.value.validate((valid)=>{
            if(valid){
                request.post("/login",data.form).then(res=>{
                    if(res.code===0){
                        ElMessage.success("登录成功")
                        localStorage.setItem('x-user',JSON.stringify(res.data))
                        router.push('/manager/home')
                    }else{
                        ElMessage.error(res.message)
                    }
                })
            }
        })
    }
</script>
<style scoped>
.login-container{
    height:100vh;
    overflow: hidden;
    background-image: url("@/assets/images/2.jpg");
    background-size:cover;

}
.login-box{
    width:400px;
    height:300px;
    position:absolute;
    left:calc( 50% - 200px );
    top:calc( 50% - 150px );
    background-color:rgba(255,255,255,.4);
    box-sizing: border-box;
    border-radius: 5px;
    /*display: flex;
    align-items: center;*/
}
.login-title{
    color:#ffffff;
    font-size:20px;
    border-bottom: 1px solid #fff;
    margin-bottom:20px;
    padding:10px 20px;
    text-align: center;
    text-shadow: 2px 2px #000;
    letter-spacing: 10px;
}
</style>